<template>
  <div class="content-div">
    <div class="login-win">
      <van-form @submit="onSubmit" input-align="right">
        <div class="upload-box">
          <van-uploader :after-read="afterRead" v-model="fileList" :deletable="false" />
        </div>
        <van-field
          class="login-input"
          v-model="form.nickname"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-button class="login-btn" round block type="info" native-type="submit">保存</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getSignToHadoop, uploadFilesToHadoop, updateMember } from '@/api/medical.js'
import { Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      form: {},
      fileList: []
    }
  },
  created () {},
  methods: {
    afterRead (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.form.head_sculpture = ret.data.data
              this.fileList = [{
                url: ret.data.data
              }]
            }
          })
        }
      })
    },
    onSubmit () {
      updateMember(this.form).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('保存成功')
          this.$store.commit('setSeverUserInfo', res.data.data)
          this.$router.push({
            name: 'mine'
          })
        }
      })
    }
  },
  mounted () {
    this.$set(this.form, 'head_sculpture', this.$store.state.user.severUserInfo.head_sculpture)
    this.$set(this.form, 'nickname', this.$store.state.user.severUserInfo.nickname)
    this.$set(this.form, 'member_id', this.$store.state.user.token)
    if (this.form.head_sculpture) {
      this.fileList = [{
        url: this.form.head_sculpture
      }]
    }
  }
}
</script>

<style scoped lang="less">
  .content-div{
    width: 100%;
    height: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-size: 12px;
    .login-win{
      width: 300px;
      margin: 0 auto;
      background-color: #FFFFFF;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      .upload-box{
        text-align: center;
        /deep/ .van-uploader__upload, /deep/ .van-image__img{
          border-radius: 50%;
        }
      }
      .login-input{
        padding: 10px 4px;
      }
      /deep/.van-cell::after{
        left: 0;
        right: 0;
      }
      .login-btn{
        margin-top: 14px;
        height: 34px;
        line-height: 34px;
        border-radius: 10px;
      }
      /deep/.van-field__control, /deep/.van-field__error-message{
        font-size: 12px;
      }
      /deep/.van-field__error-message{
        display: none;
      }
      /deep/ .van-field__label{
        font-size: 12px;
      }
    }
  }
</style>
